import { Button, Card, Form} from 'antd';
import { PureComponent } from 'react';

import { CForm, CInput } from 'antdlib/form';
import {cform} from 'antdlib'
@cform()
export default class extends PureComponent {

  options = [
    { label: 1, value: 1 },
  ];

  componentDidMount() {

    this.props.form.rules = {
      username: [{ required: true, message: '用户名必须' }],
      username1: [{ required: true, message: '用户名必须' }],
    };

    this.props.form.setFieldsValue({
      username: '123',
    });
  }


  handleSubmit = (values) => {
    console.log('values', values);
  };

  rules = {
    username: [{ required: true, message: '用户名必须' }],
    username1: [{ required: true, message: '用户名必须' }],
  };

  render() {
    const buttonItemLayout =  {
      wrapperCol: {offset: 5 },
    } ;

    return (
      <Card>
        <CForm layout="horizontal" onSubmit={this.handleSubmit} rules={this.rules}>
          <CInput name="username" label="用户名"/>
          <CInput name="username1" label="用户名"/>
          <CInput name="username2" label="用户名"/>
          <CInput name="username3" label="用户名"/>


          <Form.Item {...buttonItemLayout} style={{textAlign: 'left'}}>
            <Button type="primary" htmlType="submit">Submit</Button>
            <Button type="primary" htmlType="submit">Submit</Button>
          </Form.Item>
        </CForm>

        <CForm layout="horizontal" onSubmit={this.handleSubmit}>
          <CInput name="username" placeholder="用户名"/>
          <CInput name="username1" placeholder="用户名"/>
          <CInput name="username2" placeholder="用户名"/>
          <CInput name="username3" placeholder="用户名"/>

          <Form.Item>
            <Button type="primary" htmlType="submit">Submit</Button>
          </Form.Item>
        </CForm>


        <CForm layout="vertical" onSubmit={this.handleSubmit} rules={this.rules}>
          <CInput name="username" label="用户名"/>
          <CInput name="username1" label="用户名"/>
          <CInput name="username2" label="用户名"/>
          <CInput name="username3" label="用户名"/>


          <Form.Item>
            <Button type="primary" htmlType="submit">Submit</Button>
          </Form.Item>
        </CForm>


        <CForm layout="inline" onSubmit={this.handleSubmit} rules={this.rules}>
          <CInput name="username" label="用户名"/>
          <CInput name="username1" label="用户名"/>
          <CInput name="username2" label="用户名"/>
          <CInput name="username3" label="用户名"/>


          <Form.Item>
            <Button type="primary" htmlType="submit">Submit</Button>
          </Form.Item>
        </CForm>
      </Card>
    );
  }
}
